<!-- 校门端 -->
<template>
	<view class="">
		<view class="u-page">
			<!-- 所有内容的容器 -->
			<!-- {{current}} -->
			<view class="" v-show="current == 0">
				<view class="">
					<view class="list-head">
						<u-tabs :list="tabList" :is-scroll="false" :show-bar="false" :current="tabIndex" @change="change"></u-tabs>
					</view>
					<view class="flex buttom" v-if="tabIndex == 0 ">
						<!-- <text></text> -->
						<!-- <u-form-item  v-model="radio">
							<u-radio @click="radio=!radio">全选</u-radio>
						</u-form-item> -->
						<label class="radio flex-start"  @click="radio=!radio">
							<radio value="" :checked="radio"/><text style="margin-left: 20rpx;">{{!radio?'全选':'取消全选'}}</text>
						</label>
						<text class="li-btn" v-if="checkedArrey.length != 0" @click="show=true">操作</text>
					</view>
					<view class="li flex" v-for="(item,index) in datalist" @click="appointment(item)" :key="index" :class="{ checkedYes: checkedArrey.indexOf(item.id) != -1 }">
						<!-- 当前审查 -->
						<view class="">
							<view class="li-name">
								<text>申请类型</text> {{item.operType == 1?'入校':'出校'}}
							</view>
							<view class="li-name">
								<text>申请原因</text> {{item.businessCode==0?'去处理事情':'完结回来'}}
							</view>
							<!-- <view class="li-name">
								<text>所在班级</text> {{item.grade}}
							</view> -->
							<view class="li-name">
								<text>申请时间</text> {{item.createTime}}
							</view>
						</view>
						<!-- 当前审批 -->
						
						
						<!-- 历史审批 -->
						
						<!-- 历史审查 -->
						
						<!-- <view class="li-btn" v-if="tabIndex != 1" @click.stop="show=true,item1=item">
							操作
						</view> -->
					</view>
				</view>
			</view>
			<!-- <home v-show="current == 1"></home> -->
			<user v-show="current == 1"></user>
		</view>
		<u-popup v-model="show" mode="center" border-radius="14">
			<view class="popup">
				<textarea style="visibility: hidden;" value="" placeholder="请输入原因" />
				<view class="flex btn">
					<view @click="setItem(item1,current,0)">拒绝</view>
					<view @click="setItem(item1,current,1)">同意</view>
				</view>
			</view>
		</u-popup>
		<view class="" style="margin: 50rpx;" v-if="current == 0">
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
		<u-tabbar v-model="current" :list="list"></u-tabbar>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import user from '../userSide/user.vue'
	import audit from '../audit/index'
	import home from '../index/index'
	export default {
		components:{home,audit,user},
		data() {
			return {
				radio:false,
				item1:{},
				show:false,
				tabIndex:0,
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				tabList:[
					{
						name: '当前审批'
					}, {
						name: '历史审批'
					}
				],
				list: [
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '审批',
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						isDot: false,
						customIcon: false,
					},
				],
				info:{},
				current: 0,
				datalist:[],
				checkedArrey:[]
			}
		},
		onLoad() {
			this.info = this.$db.get('info')
			this.getloadData()
		},
		watch:{
			radio(e){
				if(e){
					this.datalist.forEach(item=>{
						this.checkedArrey.push(item.id)
					})
				}else{
					this.checkedArrey = []
				}
			},
			checkedArrey(e){
				if(e.length == 0){
					this.radio = false
				}
			}
		},
		methods: {
			// 多选
			appointment(item){
				let that = this;
				if (that.checkedArrey.indexOf(item.id) == -1) {
					// console.log(index); //打印下标
					that.checkedArrey.push(item.id); //选中添加到数组里
				} else {
					that.checkedArrey.splice(that.checkedArrey.indexOf(item.id), 1); //取消
				}
			},
			
			change(e){
				this.tabIndex = e
				if(e==1){
					this.getOperationhistory()
				}else {
					this.getloadData()
				}
			},
			setItem(item,type,num){
				let _this = this
				let data = {
					value:num,
					operId:this.checkedArrey
				}
				this.$api.operation({data}).then(eres=>{
					_this.$uTips(res.data.message)
					_this.$uTips('操作成功!','success')
					_this.show =false
					this.radio = false
					this.checkedArrey = []
				}).catch(res=>{
					_this.$uTips(res.data.message)
				})
			},
			getOperationhistory(){
				this.$api.getOperationhistory({}).then(res=>{
					this.datalist = res.data
				}).catch(res=>{})
			},
			getloadData(){
				this.$api.getloadData({}).then(res=>{
					this.datalist = res.data
				}).catch(res=>{})
			}
		}
	}
</script>

<style lang="scss">
	.home-main {
		position: relative;
		margin-top: 20rpx;
		border-radius:  12rpx;
		background-color: white;
		padding: 68rpx 42rpx 42rpx;
	}
	.home-logo {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		position: absolute;
		right: 50%;
		top: -80rpx;
		margin-right: -80rpx;
		border: 2rpx solid #fff;
	}
	.home-main-top {
		border-bottom: 2rpx solid #979797;
		.home-main-top-name {
			margin-bottom: 30rpx;
			text {
				color: #4D7CFB;
				font-size: 34rpx;
				margin-right: 20rpx;
			}
			view {
				color: #3B3B3B;
				font-size: 28rpx;
				
			}
		}
		
	}
	.home-main-top-type {
		margin-top: 30rpx;
		text {
			color: #797B87;
			font-size: 28rpx;
			margin-right: 20rpx;
		}
		view {
			color: #3B3B3B;
			
		}
	}
	.li {
		// padding: 0 ;
		margin: 0 28rpx;
		padding: 20rpx 28rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		border: 2rpx solid #fff;
		background-color: white;
		
	}
	.li-btn {
		color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		background-color: rgb(0, 151, 255);
	}
	.li-name {
		padding-top: 4rpx;
		text{
			color: #797B87;
			margin-right: 10rpx;
		}
	}
	.popup {
		padding: 20rpx;
	}
	textarea {
		width: 400rpx;
		height: 100rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		// border: 2rpx solid #ccc;
	}
	.btn {
		padding: 10rpx 0;
		border-top: 2rpx solid #fcfcfc;
		
		view {
			flex: 1;
			text-align: center;
		};
	}
	.buttom {
		padding: 20rpx 40rpx;
		margin: 0 28rpx;
		margin-top: 10rpx;
		border-radius: 10rpx;
		background-color: white;
	}

	.checkedYes {
		border: 2rpx solid #007AFF;
	}
</style>
